<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-08-29 15:34:18
 * @LastEditTime: 2023-11-14 14:36:43
-->
<template>
    <div class="home1">
        <div class="home2">
            <div class="home4"  v-if="!showNavMore">
                <div class="home8" v-for="item in  homeNavLists " v-bind:key="item" @click="goTo(item.path)">
                    <div :style="{ 'background': item.color }" class="i1">
                        <img class="img1" :src="item.img">
                    </div>
                    <div>{{ item.name }}</div>
                </div>
            </div>
            <div class="home4"  v-if="showNavMore" @click="showNavMore=!showNavMore">
                <div class="home8" v-for="item in  moreList " v-bind:key="item">
                    <div :style="{ 'background': item.color }" class="i1" @click.stop="goTo(item.path)">
                        <img class="img1" :src="item.img">
                    </div>
                    <div @click.stop="goTo(item.path)">{{ item.name }}</div>
                </div>
            </div>
            <div class="home5">
                <div class="home9">
                    <div class="df jb w">
                        <div class="tb">{{ $t('text.HomeView.l15') }}</div>
                        <div class="b2">{{ $t('text.HomeView.l16') }}</div>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw">【考勤】经纪人李云龙的请假申请</div><span class="tr">12:23</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw">【考勤】经纪人李云龙的请假申请</div><span class="tr">12:23</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw">【考勤】经纪人李云龙的请假申请</div><span class="tr">12:23</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw">【考勤】经纪人李云龙的请假申请</div><span class="tr">12:23</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw">【考勤】经纪人李云龙的请假申请</div><span class="tr">12:23</span>
                    </div>
                </div>

                <div class="home10">
                    <div class="df jb w">
                        <div class="tb">{{ $t('text.HomeView.l17') }}</div>
                        <div class="b2">{{ $t('text.HomeView.l16') }}</div>
                    </div>
                    <div class="dc w" style="padding-top: 20px;">

                        <div class="df w pdt15">
                            <div class="b3">
                                <img class="img4" src="../../assets/images/h22.svg">
                            </div>
                            <div class="f12 border1 pdl5 w">
                                <div class="df jb">
                                    <div>{{ $t('text.HomeView.l18') }}</div>
                                    <div>12:00</div>
                                </div>
                                <div class="tw">新访客 1234556778 刚刚访问了获客APP,快点联系他吧!快点联系他吧!</div>
                            </div>
                        </div>

                        <div class="df w pdt15">
                            <div class="b3">
                                <img class="img4" src="../../assets/images/h20.svg">
                            </div>
                            <div class="f12 border1 pdl5 w">
                                <div class="df jb">
                                    <div>{{ $t('text.HomeView.l19') }}</div>
                                    <div>12:00</div>
                                </div>
                                <div class="tw">新系统即将迎来全新的更新,在更新期间系统暂时无法访问</div>
                            </div>
                        </div>

                        <div class="df w pdt15">
                            <div class="b3">
                                <img class="img4" src="../../assets/images/h21.svg">
                            </div>
                            <div class="f12 border1 pdl5 w">
                                <div class="df jb">
                                    <div>{{ $t('text.HomeView.l20') }}</div>
                                    <div>12:00</div>
                                </div>
                                <div class="tw">恭喜经纪人 Jeff和李云龙签下了西海岸一期独栋5居室雅居</div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="home6">
                <div class="df jb w">
                    <div class="tb">{{ $t('text.HomeView.l21') }}</div>
                    <div class="b2">{{ $t('text.HomeView.l23') }}</div>
                </div>
                <div style="flex: 1;">
                    <Chart1 :styles="{ with: '100%', height: '100%' }"></Chart1>
                </div>
            </div>
        </div>
        <div class="home3">
            <div class="home7">

                <div class="mainDiv3">
                    <div class="df jb w">
                        <div class="tb">{{ $t('text.HomeView.l22') }}</div>
                        <div class="b2">{{ $t('text.HomeView.l16') }}</div>
                    </div>

                    <div class="df w pdt10">
                        <div class="tw dot">联系房东沟通低价</div><span class="tw tr">30分钟后</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw dot">联系房东沟通低价</div><span class="tw tr">30分钟后</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw dot">联系房东沟通低价</div><span class="tw tr">30分钟后</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw dot">联系房东沟通低价</div><span class="tw tr">30分钟后</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw dot">联系房东沟通低价</div><span class="tw tr">30分钟后</span>
                    </div>
                    <div class="df w pdt10">
                        <div class="tw dot">联系房东沟通低价</div><span class="tw tr">30分钟后</span>
                    </div>

                </div>
            </div>
            <div class="home11">

                <div class="df jb w">
                    <div class="tb">{{ $t('text.HomeView.l8') }}</div>
                    <div class="f12">
                        <span class="pdr5">{{ $t('text.HomeView.l9') }}</span>
                        <span class="pdr5">|</span>
                        <span class="pdr5">{{ $t('text.HomeView.l10') }}</span>
                    </div>
                </div>

                <div class="home12">
                    <div class="home13" @click="tabIndex=1" :style="tabIndex==1?{color:'#a4baff','align-items': 'baseline'}:{'align-items': 'baseline'}">
                        <div style="text-align: left;">{{ $t('text.HomeView.l11') }}</div>
                        <div v-if="tabIndex==1" class="home14"></div>
                    </div>
                    <div class="home13" @click="tabIndex=2" :style="tabIndex==2?{color:'#a4baff'}:{}">
                        <div>{{ $t('text.HomeView.l12') }}</div>
                        <div v-if="tabIndex==2" class="home14"></div>
                    </div>
                    <div class="home13" @click="tabIndex=3" :style="tabIndex==3?{color:'#a4baff',flex:2}:{flex:2}">
                        <div>{{ $t('text.HomeView.l13') }}</div>
                        <div v-if="tabIndex==3" class="home14"></div>
                    </div>
                    <div class="home13" @click="tabIndex=4" :style="tabIndex==4?{color:'#a4baff',flex:2}:{flex:2}">
                        <div>{{ $t('text.HomeView.l14') }}</div>
                        <div v-if="tabIndex==4" class="home14"></div>
                    </div>
                </div>
                <div class="home15">

                    <div class="home16" v-for="item of 10" v-bind:key="item">
                        <div class="home19">
                            NO.1
                            <div><img class="img3" src="../../assets/images/userHead.png"></div>
                        </div>
                        <div class="f15">张小方</div>
                        <div class="f2">人工岛一号</div>
                        <div class="f2">1,234,567.00</div>
                    </div>

                    <div class="home17"></div>

                    <div class="home18">
                        <div class="home19">
                            &emsp;-&emsp;
                            <div><img class="img3" src="../../assets/images/userHead.png"></div>
                        </div>
                        <div class="f15">张小方</div>
                        <div class="f2">人工岛一号</div>
                        <div class="f2">1,234,567.00</div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</template>
    
<script>
// import PersonalSetting from '../../components/personal/PersonalSetting.vue'
export default {
    name: "HomeView",
    components: {
        // PersonalSetting
    },
    data() {
        return {
            homeNavLists: [
                {
                    name: this.$t("text.HomeView.l1"),
                    img: require("../../assets/images/h13.svg"),
                    color: "#ec808d",
                    path: "/manage",
                },
                {
                    name: this.$t("text.HomeView.l2"),
                    img: require("../../assets/images/h14.svg"),
                    color: "#429df8",
                    path: "/customManage",
                },
                {
                    name: this.$t("text.HomeView.l3"),
                    img: require("../../assets/images/h15.svg"),
                    color: "#f59b22",
                    path: "/realEstate",
                },
                {
                    name: this.$t("text.HomeView.l4"),
                    img: require("../../assets/images/h16.svg"),
                    color: "#02bfbf",
                    path: "/personnelManage",
                },
                {
                    name: this.$t("text.HomeView.l5"),
                    img: require("../../assets/images/h17.svg"),
                    color: "#f59b22",
                    path: "/systemSetting",
                },
                {
                    name: this.$t("text.HomeView.l6"),
                    img: require("../../assets/images/h18.svg"),
                    color: "#8080ff",
                    path: "/newHouseRegistration",
                },
                { name: this.$t("text.HomeView.l7"), img: require("../../assets/images/h19.svg"), color: "#aaaaaa", path: "more" },
            ],
            moreList: [
                { name: this.$t("text.HomeView.l30"), img: require("../../assets/images/h54.svg"), color: "#01a7f0", path: "/transactionContract" },
                { name: this.$t("text.HomeView.l31"), img: require("../../assets/images/h55.svg"), color: "#c081ff", path: "/financialManage" },
                { name: this.$t("text.HomeView.l32"), img: require("../../assets/images/h56.svg"), color: "#f59b22", path: "/realEstateInformation" },
            ],

            language: this.$i18n.locale == "zh" ? true : false,
            mapType: localStorage.getItem("mapType") == "mapkit" ? false : true,
            tabIndex: 1,
            showNavMore:false
        }
    },
    mounted() {},
    methods: {
        goTo(path) {
            if(path=='more'){
                this.showNavMore=true
            }else{
                 this.$router.push(path)
            }
        },
    },
    watch: {},
    computed: {},
}
</script>
    
<style scoped>
.home1 {
    display: flex;
    background: #f8f8fa;
    width: 100%;
    padding: 40px;
}
.home2 {
    display: flex;
    flex-direction: column;
    flex: 2;
    margin-right: 25px;
}
.home3 {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.home4 {
    display: flex;
    background: white;
    border-radius: 10px;
}
.home5 {
    flex: 1;
    display: flex;
    margin: 25px 0;
    border-radius: 10px;
}
.home6 {
    flex: 1.5;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.home7 {
    background: white;
    flex: 1;
    margin-bottom: 25px;
}
.home8 {
    margin: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #494949;
}
.home9 {
    background: white;
    border-radius: 10px;
    align-items: center;
    padding: 25px;
    flex: 1;
    overflow: hidden;
    margin-right: 25px;
}
.home10 {
    background: white;
    border-radius: 10px;
    align-items: center;
    padding: 25px;
    flex: 1;
    overflow: hidden;
}
.home11 {
    flex: 1.8;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.home12 {
    display: flex;
    padding: 15px 0;
}
.home13 {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home14 {
    width: 30%;
    height: 2px;
    background: #a4baff;
    margin-top: 3px;
}

.home15 {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.home16 {
    display: flex;
    flex: 1;
    align-items: center;
}
.home17 {
    height: 1px;
    background: #bcbcbc;
}
.home18 {
    margin-top: 0px;
    display: flex;
    flex: 1;
    align-items: center;
    margin-top: 5px;
}

.home19 {
    display: flex;
    flex: 1.5;
    font-size: 13px;
    align-items: center;
}
.home19 > div {
    padding-left: 6px;
}

.mainDiv3 {
    background: white;
    border-radius: 10px;
    align-items: center;
    padding: 20px;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mainDiv5 {
    background: white;
    border-radius: 12px;
    align-items: center;
    padding: 16px;
}

.mainDiv6 {
    padding-top: 8px;
    align-items: center;
    display: flex;
    gap: 15px;
}

.w {
    width: 100%;
}

.df {
    display: flex;
    width: 100%;
}

.dc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.f1 {
    flex: 1;
    white-space: nowrap;
    font-size: 13px;
}
.f15 {
    flex: 1.5;
    white-space: nowrap;
    font-size: 13px;
}
.f2 {
    flex: 2;
    font-size: 13px;
    white-space: nowrap;
}

.i1 {
    width: 55px;
    height: 55px;
    font-size: 13px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.img1 {
    width: 50px;
    height: 50px;
}

.img3 {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    border: 1px solid #bbb;
}

.img4 {
    width: 30px;
    height: 30px;
}

.b2 {
    background: white;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 12px;
    width: 50px;
    height: 20px;
    line-height: 20px;
}

.b3 {
    width: 30px;
    height: 30px;
    border: 1px solid #aaa;
    border-radius: 5px;
}

.tb {
    color: black;
    font-size: 15px;
    font-size: 16px;
    display: flex;
    align-items: center;
}
.tb::before{
    display: inline-flex; 
    content: "";
    width: 3px;
    height: 15px;
    background: #a4baff;
    margin-right: 7px;
}

.jb {
    justify-content: space-between;
}

.tw {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    width: 90%;
    font-size: 13px;
    color: black;
    text-align: left;
}

.tr {
    text-align: right;
    padding-left: 10px;
    font-size: 13px;
}

.dot::before {
    content: "•";
    padding-right: 5px;
}

.pdt10 {
    padding-top: 10px;
}

.pdt15 {
    padding-top: 15px;
}

.pdr5 {
    padding-right: 5px;
}

.pdl5 {
    margin-left: 5px;
}

.f12 {
    font-size: 12px;
}

.border1 {
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    padding-bottom: 5px;
}
</style>